~Tech-Front Meetup~ 一歩先のフロントエンドへ
https://gyazo.com/bf35aa83ae9c8007ed3a5d974f436348
【再増枠】~Tech-Front Meetup~ 一歩先のフロントエンドへ - connpass
出前館WEB/BFFにおける品質改善の取り組み
佐藤光一郎
株式会社出前館
https://demae-can.com/
BFF
GraphQL、Apollo Server
Micro Services
Redis
Web以外でも活用している
Biome導入モチベーション
Lintに時間がかかっていた
ESLint flat configへの対応
useSortedClasses | Biome
Tailwind CSSのPrettierプラグイン
未対応
どういうときに扱うべきか?
新規導入のとき
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup - Speaker Deck
t0daaay
弁護士ドットコム株式会社
モブプロが最高だった話 - 弁護士ドットコム株式会社 Creators’ blog
モブ設計
複数の開発者が1つの設計へ取り組む
タイムマネジメント
ポモドーロ・テクニック
25min稼働, 5min休憩
ナビゲータがタイムキーパー
Google Meet
esa
FigJam
フロントエンド開発を変える!ステートマシンによる予測可能なUI設計
松田崇宏
テックタッチ株式会社
XState
https://gyazo.com/b6be01aa3ade764601bc671424206af6
https://gyazo.com/48a6af7e52404f09797a9e8eda06e953
https://gyazo.com/08012bd818c7a9c1b896744038221b88
https://gyazo.com/39c866a7f3d725eabc830374c74cebac
https://gyazo.com/900465c11292c589eff690ff5c454887
https://gyazo.com/2928bec384e557e54d59d71bf48d283c
https://gyazo.com/1f4a217854cf3475c8af4cdd10fdf380
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
nakaakist
株式会社RightTouch
サポートアクション
React Hook Form
useFormでステート管理をしていく方式
Reactのコンポーネントをパーツごとで分解する
useFormContext
https://react-hook-form.com/docs/useformcontext
型安全性やパフォーマンスの課題
サブタイプの利用で解決
useFormContextに型を渡す
tsc --generateTrace
コンパイルの統計を生成して計測
4年間でのフロントエンドリアーキテクトの変遷と進め方
yoshiko_pg
株式会社ナレッジワーク
リアーキテクチャ変遷
モノリス最低限期(2020~2021)
モノリス拡張期(2022~2023)
アプリケーション分割期(2024~)
https://gyazo.com/78140ff9d4378bddc208f8733761e5f8
https://gyazo.com/ea54f2b704a58ead6df76e91b98f4e71
やったこと
課題の洗い出し
課題ドリブンで進める
リソースに効果が見合わないことを避ける
課題に思ったことを書き出す(JIRAにメモ)
優先度決め
一覧を見返して課題間の大きなものや一緒にやれそうなものをピックアップする
保守性の低下、ライブラリのバージョンアップに依存関係を見出した
カテゴライズすると共有しやすくなる
ロードマップ作成
副業で関われる人を募集
募集要項をわかりやすく作れたので30名ほど集まってくれた
実行
副業エンジニアに依頼する場合はPM的な動きもした
管理表をつくって依頼した
2024-12-12